<!--
以此组件进行v-model的封装基础
-->
<template>
  <span class="mc-text" v-bind="$attrs" v-on="$listeners"><slot></slot>{{textValue}}</span>
</template>

<script>
export default {
  name: 'mc-text',
  data () {
    return {
    }
  },
  props:{
    //此处的value 就是父亲的v-model default:null 可以触发parent外为false
    'value' : {type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcDefaultValue':{type:[String,Number,Date,Boolean,Array,Object],default:null},
  },
  watch:{

  },
  computed:{
    textValue:{
      get:function (){
        if(this.value===null || typeof this.value=='undefined'){
          if(this.mcDefaultValue!==null){
            this.$emit("input",this.mcDefaultValue);
          }
        }
        return this.value;
      },
      set:function (v){
        this.$emit("input",v);
      }
    }
  },
  mounted () {

  },
  methods:{

  }
}
</script>

<style lang="scss">
.magicalcoder-dragging{
  .mc-text{
    border: solid 1px grey;
    display: inline-block;
    min-width: 10px;
    min-height: 10px;
  }
  .mc-text:before{
    content: '文本';
    color:#4551ff;
    font-weight:bold;
    font-size: xx-small;
    float: right;
  }
}

</style>
